<template>
    <div class="box">
        <div class="top">
            <div class="back" @click="$router.back()">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M25 5L10 20L25 35" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div>回复</div>
            <div></div>
        </div>

        <div class="content">
            <!-- 原帖子内容 -->
            <div class="post-item">
                <div class="post_user">
                    <img src="../assets/my/pic_mr.png" alt="用户头像">
                    <span>{{ post.user_name }}</span>
                </div>
                <div class="post-content">{{ post.content }}</div>
                <img v-if="post.image" :src="post.image" class="post-image" alt="帖子图片">
                <div class="post-footer">
                    <div class="post-time">{{ post.createTime }}</div>
                    <div class="post-actions">
                        <div class="like-btn">
                            <svgIcon iconName="icon-dianzan" font-size="40px"></svgIcon>
                            <span>{{ post.likes }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 回复列表 -->
            <div v-for="reply in replies" :key="reply.id" class="post-item reply-item">
                <div class="post_user">
                    <img src="../assets/my/pic_mr.png" alt="用户头像">
                    <span>{{ reply.user_name }}</span>
                </div>
                <div class="post-content">{{ reply.content }}</div>
                <div class="post-footer">
                    <div class="post-time">{{ reply.createTime }}</div>
                </div>
            </div>
        </div>

        <!-- 回复输入框 -->
        <div class="reply-input">
            <input type="text" v-model="replyContent" placeholder="写下你的回复...">
            <div class="send-btn" @click="sendReply">发送</div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const post = ref({});
const replies = ref([]);
const replyContent = ref('');

// 获取帖子数据
onMounted(() => {
    const postData = JSON.parse(route.query.post || '{}');
    post.value = postData;
});

// 返回上一页
const goBack = () => {
    router.back();
};

// 发送回复
const sendReply = () => {
    if (!replyContent.value.trim()) return;

    const newReply = {
        id: Date.now(),
        user_name: '观万里',
        content: replyContent.value,
        createTime: new Date().toLocaleString('zh-CN', {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false
        }).replace(/\//g, '-'),
    };

    replies.value.unshift(newReply);
    replyContent.value = '';
};
</script>

<style lang="less" scoped>
.box {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
    background-color: #f5f5f5;

    .top {
        width: 100%;
        height: 100px;
        background-color: #fb8fae;
        color: #fff;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        font-size: 32px;  
        justify-content: space-between;
        padding: 0 45px;
    }

    .content {
        margin-top: 100px;
        padding: 20px;
        padding-bottom: 120px;
        
        .post-item {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            
            &.reply-item {
                margin-left: 20px;
                background: #f9f9f9;
            }
            
            .post_user {
                width: 100%;
                height: 60px;
                line-height: 60px;
                display: flex;
                img {
                    display: block;
                    width: 60px;
                    height: 60px;
                    border-radius: 50%;
                }
                span {
                    font-size: 24px;
                    display: block;
                    margin-left: 30px;
                }
            }
            .post-content {
                margin-top: 10px;
                font-size: 32px;
                line-height: 1.5;
                margin-bottom: 20px;
            }
            
            .post-image {
                width: 100%;
                max-height: 400px;
                object-fit: cover;
                border-radius: 8px;
                margin-bottom: 15px;
            }
            
            .post-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-size: 24px;
                color: #666;
                
                .post-actions {
                    display: flex;
                    align-items: center;
                    
                    .like-btn {
                        display: flex;
                        align-items: center;
                        gap: 8px;
                        cursor: pointer;
                        
                        span {
                            color: #666;
                        }
                    }
                }
            }
        }
    }

    .reply-input {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100px;
        background: white;
        display: flex;
        align-items: center;
        padding: 0 20px;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);

        input {
            flex: 1;
            height: 70px;
            border: 1px solid #ddd;
            border-radius: 35px;
            padding: 0 30px;
            font-size: 28px;
            margin-right: 20px;
        }

        .send-btn {
            width: 120px;
            height: 70px;
            background: #fb8fae;
            color: white;
            border-radius: 35px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            cursor: pointer;
        }
    }
}
</style> 